<!DOCTYPE html>
<html lang="en" xmlns:class="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>我的订单</title>
</head>
<style>
  .top-title:hover{
    cursor: pointer;
    color: #b31e22!important;
  }
  .el-input-group__append, .el-input-group__prepend{
    background-color: #b31e22!important;
    color: #ffffff!important;
  }
  .menu-index{
    text-align: center;
    width: 150px;
    color: #faa024;
    cursor: pointer;
  }
  .menu-index:hover{
    background-color:#000000;
  }
  .SearchBar input {
    height: 50px;
    width: 500px;
  }
  .selectBar {
    height: 60px;
  }
  .menuList{
    background-color: #efd0d0 !important;
    color: #FFFFFF!important;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .el-icon-star-off{
    height: 44px;
  }
  sapn{
    width: 100% !important;
    float: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>
<body>
<div id="app">
  <!--顶部用户导航栏-->
  <template>
    <div style="font-size: 14px;">
      <div style="display: flex;height: 60px;padding: 0 320px;background-color: #f5f5f5;border-radius: 10px">
        <div v-show="visibleAlready" style="margin-top: 3px">
          <el-col :span="6">
            <el-avatar style="height: 50px;width:50px;" :src="User.userImg"></el-avatar>
          </el-col>
          <el-col :span="18" style="line-height:50px">
            <span style="padding-right: 30px;line-height: 40px;color: #666;margin-left:30px">{{User.realName}}</span>
          </el-col>
        </div>
        <div v-show="visibleNotYet" style="margin-top: 10px">
          <span style="padding-right: 20px;line-height: 40px;color: #666;">欢迎光临淘书网,请</span>
          <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpLogin">登录</el-button>
          <span style="padding-right: 20px;line-height: 40px;">|</span>
          <el-button type="text" style="color: #666" class="top-title" @click="jumpRegister">注册</el-button>
        </div>
        <div style="flex: 1;display: flex;">
          <div style="flex: 0.75;"></div>
          <div style="width: 300px;display: flex;">
            <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpPersonalCenter"> <i class="el-icon-user"></i>个人中心</el-button>
            <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpCart"><i class="el-icon-shopping-cart-2"></i>购物车</el-button>
            <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpOrders"><i class="el-icon-goods"></i>我的订单</el-button>
            <el-button type="text" style="color: #666;margin-right: 10px;margin-top: 9px;" class="top-title" @click="jumpCollect"><i class="el-icon-star-off"></i>我的收藏</el-button>
            <el-button type="text" v-show="visibleAlready" style="color: #666;margin-right: 10px;" class="top-title" @click=" killSession"><i class="el-icon-switch-button"></i>退出登录</el-button>
          </div>
        </div>
      </div>
    </div>
  </template>
  <div style="padding: 0 200px;">
  <div style="height: 50px;background-color: #B3C0D1;display: flex; align-items: center;">
    <el-link :underline="false" type="primary" href="/index.html"><span
            style="color: white;font-size: 20px;margin-left: 20px;"><icon class="el-icon-s-home"></icon> 返回首页</span>
    </el-link>
  </div>
  </div>
  <!--订单详情对话框-->
  <template>
    <el-dialog
          title="订单详情"
          :visible.sync="detailsVisible"
          width="40%"
          :close-on-click-modal="false"
          @close="resent"
           >
      <div style="margin-top: -10px;font-size: 17px;margin-bottom: 20px">
        <el-card class="box-card" style="width: auto;">
          <div slot="header" class="clearfix">
            <el-col :span=12><span>收件人：{{addressee.name}}</span></el-col>
            <el-col :span="12"><span>手机号码：{{addressee.tel}}</span></el-col>
          </div>
          <el-row><span>收货地址：{{addressee.address}}</span></el-row>
        </el-card>
      </div>
      <el-table :data="ordersItems" border stripe width="40" style="margin-top: 10px">
        <el-table-column align="center" type="index" label="ID"></el-table-column>
        <el-table-column label="图片" >
          <template slot-scope="scope">
            <el-image style="width: 100px;height: 110px" :src="scope.row.bookImg"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="bookName" label="书名" ></el-table-column>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        le-column>
        <el-table-column prop="bookPrice" label="单价" ></el-table-column>
        <el-table-column prop="quantity" label="购买数量">
          <template v-slot="scope">
            <span style="color:orangered">{{scope.row.quantity}}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </template>
  <template>
    <div style="padding: 0 210px">
      <div style="margin-top: 30px">
        <el-row>
          <el-form ref="searchForm" :inline="true" :model="searchForm">
            <el-row>
              <el-col :span="8">
                <el-form-item label="订单名称:">
                  <el-input v-model="searchForm.name" placeholder="Name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订单状态:">
                  <el-select v-model="searchForm.status" placeholder="Status">
                    <el-option label="未付款"  value="未付款"></el-option>
                    <el-option label="待发货"  value="待发货"></el-option>
                    <el-option label="运输中"  value="运输中"></el-option>
                    <el-option label="已签收"  value="已签收"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-form-item>
                <el-row>
                  <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
                  <el-button type="success" icon="el-icon-refresh" @click="resetSearch">重置</el-button>
                </el-row>
              </el-form-item>
            </el-row>
          </el-form>
        </el-row>
      </div>
      <el-dialog
              title="图书评价"
              :visible.sync="dialogVisible"
              width="50%"
              @close="cancelAppraise">
      <el-form ref="appraiseForm" :model="appraiseForm" label-width="80px">
        <div v-for="(item,index) in appraiseForm.item" :key="index">
          <div>
            <el-row>
              <el-col :span="6">
                <img :src="item.bookImg"  style="width: 160px;height: 140px">
              </el-col>
              <el-col :span="16">
                <el-form-item label-width="0px" prop="appraiseText">
                  <el-input type="textarea" :rows="6" v-model="item.appraiseText" :placeholder="'请输入'+item.bookName+'的评价!'"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
          <el-form-item style="margin-left: 40px">
            <el-button type="primary" @click="submitForm(appraiseForm)">确定</el-button>
            <el-button  @click="cancelAppraise">取消</el-button>
          </el-form-item>
      </el-form>
      </el-dialog>
      <el-dialog
              title="图书评价"
              :visible.sync="dialogVisible1"
              width="50%"
              @close="cancelAppraise">
        <el-form ref="appraiseForm" :model="appraiseForm" label-width="80px">
          <div v-for="(item,index) in appraiseForm.item" :key="index">
            <div>
              <el-row>
                <el-col :span="6">
                  <img :src="item.bookImg"  style="width: 160px;height: 140px">
                </el-col>
                <el-col :span="16">
                  <el-form-item label-width="0px" prop="appraiseText">
                    <el-input disabled type="textarea" :rows="6" v-model="item.appraiseText" :placeholder="'请输入'+item.bookName+'的评价!'"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-form>
      </el-dialog>
      <el-table
              :data="tableData"
              border stripe size="medium"
             >
        <el-table-column
                align="center"
                type="index">
        </el-table-column>
        <el-table-column prop="bookImg" label="图片" align="center">
          <template v-slot="scope">
            <el-image style="width: 100px;height: 110px" :src="scope.row.bookImg"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="no" label="订单编号" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="name" label="订单名称" align="center"></el-table-column>
        <el-table-column prop="totalPrice" label="总金额" width="120px" align="center">
          <template v-slot="scope">
            <span style="color:orangered">￥{{scope.row.totalPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column label="时间" align="center" width="280" >
            <template v-slot="scope">
              <div style="text-align: left;margin-left: 20px">
                <span>创建时间：{{scope.row.creatTime}}</span><br>
                <span>付款时间：{{scope.row.payTime}}</span><br>
                <span>发货时间：{{scope.row.deliveryTime}}</span><br>
                <span>签收时间：{{scope.row.signTime}}</span><br>
              </div>
            </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态" width="150px" align="center">
          <template v-slot="scope">
            <span v-if="scope.row.status==='未付款'" style="color: #e5181d">未付款</span>
            <span v-if="scope.row.status==='待发货'" style="color: #faa024">待发货</span>
            <span v-if="scope.row.status==='运输中'" style="color: rgba(30,121,224,0.99)">运输中</span>
            <span v-if="scope.row.status==='已签收'" style="color: #63e518">已签收</span>
            <el-button style="margin-top: 10px;color: #535b64" @click="showOrdersDetails(scope.row.id)">订单详情</el-button>
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                width="150px"
                label="操作"
        >
          <template slot-scope="scope">
            <el-button v-if="scope.row.status=='未付款'" type="danger" @click="jumpPay(scope.row.id)">立即付款</el-button>
            <el-button v-if="scope.row.status=='待发货'" type="warning" >提醒发货</el-button>
            <el-button v-if="scope.row.status=='运输中'" type="success" @click="confirmReceipt(scope.row.id)">确认收货</el-button>
            <el-button v-if="scope.row.status=='已签收'&&scope.row.isAppraise==0"  @click="appraise(scope.row)">评论</el-button>
            <el-button v-else-if="scope.row.status=='已签收'&&scope.row.isAppraise==1"  @click="getAppraise(scope.row.id)">查看评论</el-button>
            <el-button v-if="scope.row.status=='未付款'" type="text" @click="deleteById(scope.row.id)">取消订单</el-button>
            <el-button v-else type="text" >申请退款</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="5"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount">
      </el-pagination>
    </div>
  </template>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>

<<script>
  new Vue({
    el: '#app',
    created() {
      //钩子函数，vue对象初始化后执行
      this.getUser()
      this.showOrders();
    },
    mounted() {
    },
    methods: {
      showOrders(){
        var _this=this;
        axios({
          method:"post",
          url:"/orders/page?currentPage="
                  + this.currentPage + "&pageSize=" + this.pageSize,
          data: _this.searchForm
        }).then(resp =>{
          _this.tableData = resp.data.items;
          //设置表格总记录数
          _this.totalCount = resp.data.totalCount;
        })
      },
      showOrdersDetails(val){
        let id = val;
        this.detailsVisible=true;
          axios({
            method: "get",
            url: "/orders/detail?ordersId=" + id,
          }).then((res) => {
            this.ordersItems = res.data.data;
          });
        axios({
          method: "get",
          url: "/orders/address?ordersId=" + id,
        }).then((res) => {
          if (res.data.code ==1){
            this.addressee = res.data.data;
          }
          //地址为空时，会导致this.addressee无法被下一个地址覆盖，导致数据错误，关闭不了dialog
        });
      },
      appraise(row){
        console.log(row)
        this.dialogVisible=true;
        axios({
          method: "get",
          url: "/orders/detail?ordersId=" + row.id,
        }).then((res) => {
          this.dataList = res.data.data;
          this.appraiseForm.orderId=row.id
          this.appraiseForm.userId=this.User.id
          this.dataList.forEach(item=>{
              this.appraiseForm.item.push({appraiseText:'',bookId:item.bookId,bookImg:item.bookImg,bookName:item.bookName})
          })
        });
      },
      submitForm(form){
        var that=this
        console.log(form)
        axios({
          method: "get",
          url: "/orders/appraise?ordersId=" + form.orderId,
        }).then((res) => {
        })
        axios({
          method: "put",
          url: "/appraise",
          data: form
        }).then(function (resp) {
          if (resp.data.code == 1) {
            // 重新查询数据
            that.dialogVisible = false;
            that.appraiseForm={
              userId:0,
              orderId:0,
              item:[]
            }
            that.showOrders();
            that.$message({
              type: 'success',
              message: '已评价!'
            });
          }
        })
      },
      getAppraise(id){
        var that=this
        axios({
          method: "get",
          url: "/appraise/byOrder/"+id,
        }).then(function (resp) {
          if (resp.data.code == 1) {
            // 重新查询数据
            that.dialogVisible1 = true;
            that.dataList = resp.data.data;
          }
          that.dataList.forEach(item => {
            that.appraiseForm.item.push({appraiseText: item.appraiseText, bookImg: item.bookImg})
          })
        })
      },
      cancelAppraise(){
        this.dialogVisible = false;
        this.dialogVisible1 = false;
        this.appraiseForm={
            userId:0,
            item:[]
        }
      },
      deleteById(val){
        let id = val;
        this.$confirm('确认是否取消该订单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var _this = this;
          axios({
            method: "delete",
            url: "/orders/" + id,
          }).then(function (resp) {
            if (resp.data.code==1) {//删除成功
              // 重新查询数据
              _this.showOrders();

              _this.$message({
                type: 'success',
                message: '取消成功!'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消失败'
          });
        });
      },
      onSubmit() {
        console.log(this.searchDialog);
        this.currentPage = 1;//每次查询回到页码到第一页
        this.showOrders();
      },
      resetSearch() {
        this.searchForm = {
          name: undefined,
        }
        this.showOrders();
      },
      confirmReceipt(ordersId){
        this.$confirm('是否确认收货?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios({
            method: "get",
            url: "/orders/status?ordersId=" + ordersId + "&type=signed",
          }).then((res) => {
            if (res.data.code==1){
              this.showOrders()
              this.$message({
                message: '收货成功',
                type: 'success'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      getUser() {//获取用户名
        //发送ajax请求
        axios({
          method:"get",
          url:"/user",
        }).then(resp =>{
          this.User = resp.data;
          console.log(this.User);
          if (this.User !== null && this.User !== ""&& this.User !==undefined) {
            this.visibleNotYet = false;
            this.visibleAlready= true;
          }else{this.User={userName:null}}
        })
      },
      killSession() {//退出登录
        this.$confirm('确认退出登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.visibleNotYet = true;
          this.visibleAlready = false;
          //发送ajax请求
          axios.post("/user/logout").then((res) => {
          })
          window.location.href = "../index.html"
          this.$message({
            message: '退出成功',
            type: 'success'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      resent(){
        this.addressee={};
      },
      //当前页数
      handleCurrentChange(val) {
        this.currentPage = val;
        this.showOrders();
        // console.log(`当前页: ${val}`);
      },
      //每页条数
      handleSizeChange(val) {
        this.pageSize = val;
        this.showOrders();
        // console.log(`每页 ${val} 条`);
      },
      jumpPay(ordersId){
        window.location.href = "confirmAddress.html?ordersId=" + ordersId;
      },
      jumpAllBook(){
        location.href ="allBook.html";
      },
      jumpIndex(){
        location.href ="index.html";
      },
      jumpLogin(){
        location.href ="/login_page/login.html;";
      },
      jumpCollect(){
        location.href ="/user_page/collect.html";
      },
      jumpRegister(){
        location.href ="/register.html";
      },
      jumpPersonalCenter(){
        location.href ="personCenter.html";
      },
      jumpCart(){
        location.href ="cart.html";
      },
      jumpOrders(){
        location.href ="orders.html";
      },
    },
    data() {
      return {
        User:[],//用户信息
        visibleNotYet:true,
        visibleAlready:false,
        dialogVisible:false,
        dialogVisible1:false,
        dataList:[],
        appraiseForm:{
          item:[],
          userId:0,
          orderId:0
        },
        pageSize:5,
        totalCount:100,
        currentPage:1,
        tableData:[{
          name:'',
          tel:'',
          address:''
        }],
        addressee:{},
        ordersItems:[],
        detailsVisible:false,
        searchForm:{
          name:'',
          status:''
        },
        activeIndex: '5',
      }
    }
  })
</script>
</html>